ページの参照時間を表示する
今回は、ページを参照している時間をリアルタイムで表示するJavaScriptを紹介します。これまでに紹介してきた時間関連のJavaScriptのまとめとして学習してみてください。さらに工夫を施せば、もっと面白いJavaScriptを作成できると思います。

→ JavaScript関数の呼び出しと時間表示枠の作成
 
最初に、ページの参照時間を表示させるJavaScript関数「timecount()」を呼び出します。これは「BODY」タグにonLoadイベントを追加すると実行できます。また、「FORM」タグを使用して時間を表示するためのテキストボックスを作成しておきます。このとき、「FORM」および「INPUT」タグに適当な名前を付けておくようにしてください。
<BODY onLoad="timecount()">
　　：
　　：
<FORM name="form1">
ただいまの経過時間
<INPUT type="text" name="time" size="10">
</FORM>
　　：
　　：
</BODY>


→ 経過時間を秒数で取得する
 
次は、JavScriptの作成です。まずは「actime」という名前のDateオブジェクトにアクセス時の日時を記録させます。続いて、関数「timecount()」の自作に移ります。関数内では、「now」に現在の日時を記録し、「now」と「actime」の差「ta」を計算することで経過時間を求めます。なお、getTime()は1/1000秒単位の数値を返すメソッドとなります。このため、経過時間「ta」を秒単位に直すには、ta/1000を計算し、Math.floorで小数点以下を切り捨る必要があります。
<SCRIPT language="JavaScript">
<!--
var actime = new Date();
function timecount(){
now = new Date();
ta = now.getTime() - actime.getTime();
t = Math.floor(ta/1000);
}
//-->
</SCRIPT>


→ 取得した秒数を時／分／秒に分ける
 
続けて、秒単位の経過時間「t」を時／分／秒に分けていきます。時「h」は、「t」を3600（60分×60秒）で割り、小数点以下を切り捨てれば算出できます。秒「s」は、「t」を60で割った時の“余り”で算出できます。最も難しいのが分「m」の算出ですが、これは「t」を60で割って分単位に変換し、さらに60（1時間）で割った時の“余り”を計算すると求められます。
<SCRIPT language="JavaScript">
<!--
var actime = new Date();
function timecount(){
now = new Date();
ta = now.getTime() - actime.getTime();
t = Math.floor(ta/1000);
h = Math.floor(t/3600);
m = Math.floor((t/60)%60);
s = Math.floor(t%60);
}
//-->
</SCRIPT>


→ 時／分／秒を整形して表示する
 
あとは、時「h」／分「m」／秒「s」を表示するだけです。ここでは「h」「m」「s」が必ず2桁になるように、10未満の場合にのみ先頭に"0"を追加して「h」「m」「s」を整形しました。その後、「document.….value＝」でテキストボックス内を書き換えれば、ページの参照時間を表示できます。なお、リアルタイムで参照時間を表示するには、setTimeout()で自作関数「timecount()」を繰り返し実行させる必要があります。
<SCRIPT language="JavaScript">
<!--
var actime = new Date();
function timecount(){
now = new Date();
ta = now.getTime() - actime.getTime();
t = Math.floor(ta/1000);
h = Math.floor(t/3600);
m = Math.floor((t/60)%60);
s = Math.floor(t%60);
if(h<10){h = "0" +h}
if(m<10){m = "0" +m}
if(s<10){s = "0" +s}
document.form1.time.value = h + ":" + m + ":" + s;
setTimeout("timecount()",1000)
}
//-->
</SCRIPT>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��